<template>
	<view>
		<view class="box-bg">
			<uni-nav-bar left-icon="left" :title="itemInfo.title" @clickLeft="back" />
		</view>
		<view class="imageWrap">
			<image :src="itemInfo.image" class="imgae" mode=""></image>
		</view>
		<view class="title">{{itemInfo.title}}</view>
		<view class="price">¥ {{itemInfo.price}}</view>
		<uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"
			@buttonClick="buttonClick" />
	</view>
</template>

<script>
	import {mapGetters, mapMutations} from 'vuex'
	export default {
		data() {
			return {
				itemInfo: {},
				options: [{
									icon: 'cart',
									text: '购物车',
									info: 0
								}],
								buttonGroup: [{
										text: '加入购物车',
										backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
										color: '#fff'
									}
								],

			}
		},
		onLoad(options) {
			uni.request({
				url: 'http://localhost:3000/list/' + options.id
			}).then(res => {
				this.itemInfo = res.data;
			})
			this.options = [{
									icon: 'cart',
									text: '购物车',
									info: this.allCount
								}]
		},
		computed: {
			...mapGetters(['allCount'])
		},
		watch: {
			allCount: function(newValue) {
				this.options = [{
								icon: 'cart',
								text: '购物车',
								info: newValue
							}]
			}
		},
		methods: {
			...mapMutations(['addCar']),
			back() {
				const pages = getCurrentPages()
				if (pages.length > 1) {
					uni.navigateBack(1)
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}

			},
			onClick() {
				uni.switchTab({
					url:'/pages/car/car'
				})
			},
			buttonClick() {
				this.addCar(this.itemInfo)
			}
		}
	}
</script>

<style lang="scss">
	.imageWrap {
		width: 750rpx;
		height: 750rpx;

		.imgae {
			width: 750rpx;
			height: 750rpx;
		}
	}

	.title {
		font-size: 40rpx;
	}

	.price {
		font-size: 34rpx;
	}
</style>